<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题"/>
      </el-form-item>

      <el-form-item label="指向地址" prop="url">
        <el-input v-model="form.url" placeholder="请输入指向地址"/>
      </el-form-item>

      <el-form-item label="有效期范围" prop="daterange">
        <el-date-picker
          v-model="form.daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="form.sort" controls-position="right" :min="0"/>
      </el-form-item>

      <el-form-item label="客户端" prop="app">
        <el-radio-group v-model="form.app" v-for="item in roleOptions">
          <el-radio :label="item.dictValue" border style="margin-right: 10px;">{{item.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="摘要"/>
      </el-form-item>


      <el-form-item label="广告图片" prop="image">
        <UploadImage @change="imageChange" :path="form.image"></UploadImage>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" :disabled="addLoading" @click.native.prevent="submitForm">
        <span v-if="!addLoading">提 交</span>
        <span v-else>提 交 中...</span>
      </el-button>
    </div>
  </div>
</template>

<script>
  import UploadImage from '@/components/UploadImage';
  import {addGuide, editGuide} from "@/api/main/app/guide";

  export default {
    props: {
      row: {
        type: Object,
        require: false
      },
      statusOptions: {
        type: Array,
        require: false
      },
      roleOptions: {
        type: Array,
        require: false
      }
    },
    components: {UploadImage},
    data() {
      return {
        cityList: undefined,
        addLoading: false,
        form: {
          status: '1',
          app: '1',
          isdefault: 0,
          url: '',
          cityId: '',
          daterange: '',
          image: '',
          remark: '',
          sort: 0
        },
        rules: {
          daterange: [
            {type: 'array', required: true, message: '请选择有效期范围', trigger: 'change'},
          ],
          image: [
            {required: true, message: '请上传广告图片', trigger: 'change'},
          ],
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'},
            {max: 50, message: '标题不能超过50个字符', trigger: 'blur'}
          ],
          remark: [
            {max: 255, message: '备注不能超过255个字符', trigger: 'blur'}
          ],
          url: [
            {required: true, message: '请输入指向地址', trigger: 'blur'},
            {max: 50, message: '指向地址不能超过50个字符', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      if (this.row) {
        let item = this.row;
        this.form = {
          id: item.id,
          app: item.app + "",
          title: item.title,
          status: item.status + "",
          daterange: [item.starttime, item.endtime],
          image: item.image,
          url: item.url,
          sort: item.sort,
          remark: item.remark||''
        };
      }
    },
    methods: {
      submitForm() {
        let _this = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.starttime = this.form.daterange[0];
            this.form.endtime = this.form.daterange[1];
            if (this.form.id) {
              this.addLoading = true;
              editGuide(this.form).then(response => {
                this.msgSuccess("编辑成功");
                this.$emit('goBack', 'editBanner');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            } else {
              this.addLoading = true;
              addGuide(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.$emit('goBack', 'addBanner');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            }

          }
        });
      },
      imageChange(message) {
        this.$set(this.form, 'image', message);
        this.$refs.form.validateField('image');
      },
      provinceClear() {
        this.form.cityId = '';
        this.cityList = [];
      },
      provinceChange(value) {
        if (value) {
          this.form.cityId = '';
          this.cityList = this.areaList.filter(item => item.id === value)[0].cityList;
          console.log(this.cityList);
        }
      }
    }
  }
</script>
